<%--
  Created by IntelliJ IDEA.
  User: huadongyu
  Date: 2025/10/12
  Time: 21:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }

        /*.file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }*/
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .img {
            /* max-width: 100px; */
            width: 100px;
            /* max-height: 120px; */
        }

        tr td {
            line-height: 120px !important;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            // 课程管理 修改课程
            $(".doCourseModify").on("click", function () {
                $("#course-id-input").show();
                $(".file").html("选择文件");
                $(".modal-title").html("修改课程");
                $("#Course").modal("show");
                //修改课程默认信息
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/course/findById",
                    data: {"id": $(this).attr("data-id")},
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            console.log(result);
                            // 先重置下拉框，确保正确初始化
                            $("#recommendation-grade").val("-1");
                            $("#course-type-id").val("-1");
                            
                            // 设置其他字段值
                            $("#course-id").val(result.returnObject.id);
                            $("#course-name").val(result.returnObject.courseName);
                            $("#course-info").val(result.returnObject.courseInfo);
                            $("#course-author").val(result.returnObject.author);
                            // 不要尝试设置文件输入框的值，这是浏览器安全限制

                            // 使用标准的val()方法设置下拉框值（确保值类型兼容）
                            setTimeout(function() {
                                if(result.returnObject.recommendationGrade !== undefined && result.returnObject.recommendationGrade !== null) {
                                    $("#recommendation-grade").val(String(result.returnObject.recommendationGrade));
                                }
                                if(result.returnObject.courseTypeId !== undefined && result.returnObject.courseTypeId !== null) {
                                    $("#course-type-id").val(String(result.returnObject.courseTypeId));
                                }
                            }, 10); // 短暂延迟确保DOM更新
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
            });
            $(".curse-btn").on("click", function () {
                $("#Course").modal("hide");
            });

            // 课程管理 添加课程
            $("#doCourse").on("click", function () {
                $("#course-id-input").hide();
                $("#course-name").val("");
                $("#course-info").val("");
                $("#course-author").val("");
                $("#recommendation-grade").val("-1");
                $("#course-type-id").val("-1");
                $("#errorMsg").html("");
                $("#Course").find(".file").html("选择文件");
                $("#Course").modal("show");
            });
            // 修改课程表单提交
            $("#add-course-btn").on("click", function () {
                // 检查当前是添加还是修改操作
                if($(".modal-title").html() == "修改课程") {
                    let formData = new FormData($("#modifyForm")[0]);
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/course/modifyCourse",
                        data: formData,
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            if(result.responseCode == "2001"){
                                location.href = "${pageContext.request.contextPath}/course/findAll?pageNo=${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}"
                            }else {
                                $("#errorMsg").html(result.message);
                            }
                        }
                    });
                    return; // 阻止继续执行添加课程的逻辑
                }

                // 验证表单数据
                // 检查是否已存在errorMsg元素，如果不存在则创建
                var errorMsgEl = $("#Course").find("#errorMsg");
                if (errorMsgEl.length === 0) {
                    $("#Course").find(".modal-body").prepend("<div id='errorMsg' style='color:red; margin-bottom:10px;'></div>");
                    errorMsgEl = $("#Course").find("#errorMsg");
                }

                if (!$("#course-name").val()) {
                    errorMsgEl.html("请输入课程名称");
                    return;
                }
                if (!$("#course-author").val()) {
                    errorMsgEl.html("请输入作者");
                    return;
                }
                if ($("#recommendation-grade").val() == "-1") {
                    errorMsgEl.html("请选择推荐等级");
                    return;
                }
                if ($("#course-type-id").val() == "-1") {
                    errorMsgEl.html("请选择课程类别");
                    return;
                }

                // 验证通过，清除错误信息
                errorMsgEl.html("");

                let formData = new FormData($("#addForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/course/addCourse",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            $("#Course").modal("hide");
                            location.href = "${pageContext.request.contextPath}/course/findAll";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
            });

            //课程章节显示
            $(".course-detail").on("click", function () {
                $('#frame-id', window.parent.document).attr('src', '${pageContext.request.contextPath}/chapter/findAll');
            });

            // 显示隐藏查询列表
            $('#show-course-search').click(function () {
                $('#show-course-search').hide();
                $('#upp-course-search').show();
                $('.show-course-search').slideDown(500);
            });
            $('#upp-course-search').click(function () {
                $('#show-course-search').show();
                $('#upp-course-search').hide();
                $('.show-course-search').slideUp(500);
            });

            //按钮的超链接设置函数
            //      myoptions.pageUrl = function(type, page, current) {
            //          return "${pageContext.request.contextPath }/findAll.do?pageNo="
            //                  + page;
            //      };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function (event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            $("#coursePageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage: "${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}",
                totalPages: "${coursePage.pages == 0 ? 1 : coursePage.pages}",
                size: "normal",
                alignment: "center",
                pageUrl: function (type, page, current) {
                    return "${pageContext.request.contextPath}/course/findAll?pageNo=" + page;
                }
            })
            $("input[name='modifyStatus']").click(function () {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/course/modifyStatus",
                    data: {
                        "id": $(this).attr("data-id"),
                        "status": $(this).attr("data-status")
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "${pageContext.request.contextPath}/course/findAll?pageNo=${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            })
        });

        function imageUpload(item) {
            $(item).click();
        }

        function imageChange(item) {
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }
    </script>

</head>

<body>
<div class="panel panel-default" id="userPic">
    <div class="panel-heading">
        <h3 class="panel-title">课程管理 <span id="errorMsg" style="color:red;"></span></h3>
    </div>
    <div>
        <input type="button" value="添加课程" class="btn btn-primary" id="doCourse" style="margin: 5px 5px 5px 15px;"/>
        <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;"/>
        <input type="button" class="btn btn-primary" id="show-course-search" value="展开搜索"/>
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-search" style="display: none;"/>
    </div>
    <div class="panel-body">
        <div class="show-course-search" style="display: none;">
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="author-name-search" class="col-xs-3 control-label">作者：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="author-name-search" placeholder="请输入作者"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-name-search" class="col-xs-3 control-label">课程名称：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="course-name-search"
                                   placeholder="请输入课程名称"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-status-search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-status-search" name="course-status-search">
                                <option value="-1">全部</option>
                                <option value="0">启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-type-id-search" class="col-xs-3 control-label">课程类别：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-type-id-search" name="course_type_id-search">
                                <option value="-1">全部</option>
                                <c:forEach items="${enable}" var="able">
                                    <option value="${able.id}">${able.typeName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入开始时间:2017-10-10"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入结束时间:2017-10-12"/>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="modal fade" tabindex="-1" id="Course">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加课程</h4>
                    </div>
                    <form id="modifyForm" enctype="multipart/form-data">
                        <div class="modal-body text-center">
                                <div class="row text-right" id="course-id-input" style="display: none;">
                                    <label for="course-id" class="col-xs-4 control-label">课程编号：</label>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" id="course-id" name="course_id"
                                               readonly="true"/>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-right">
                                    <label for="course-name" class="col-xs-4 control-label">课程名称：</label>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" id="course-name" name="courseName"/>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-right">
                                    <label for="course-info" class="col-xs-4 control-label">课程简介：</label>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" id="course-info" name="courseInfo"/>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-right">
                                    <label for="course-author" class="col-xs-4 control-label">作者：</label>
                                    <div class="col-xs-4">
                                        <input type="text" class="form-control" id="course-author" name="author"/>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-right">
                                    <label class="col-xs-4 control-label">封面图片：</label>
                                    <div class="col-xs-4">
                                        <a href="javascript:imageUpload('#cover-image');" class="file">选择文件</a>
                                        <input type="file" name="file" style="display: none;"
                                               onchange="imageChange(this)" id="cover-image"/>
                                    </div>
                                </div>
                                <br>
                                <div class="row text-right">
                                    <label for="recommendation-grade" class="col-xs-4 control-label">推荐等级：</label>
                                    <div class="col-xs-4">
                                        <select class="form-control" id="recommendation-grade"
                                                name="recommendationGrade">
                                            <option value="-1">请选择</option>
                                            <option value="0">普通</option>
                                            <option value="1">推荐</option>
                                        </select>
                                    </div>
                                </div>
                                <br>
                                <input type="hidden" id="id" name="id" value=""/>
                                <div class="row text-right">
                                    <label for="course-type-id" class="col-xs-4 control-label">课程类别：</label>
                                    <div class="col-xs-4">
                                        <select class="form-control" id="course-type-id" name="courseTypeId">
                                            <option value="-1">请选择</option>
                                            <c:forEach items="${enable}" var="able">
                                                <option value="${able.id}">${able.typeName}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <br>
                            </form>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button class="btn btn-primary curse-btn" id="add-course-btn">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-list">
            <table class="table table-bordered table-hover" style="text-align: center;">
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">课程名称</th>
                    <th class="text-center">作者</th>
                    <th class="text-center">封面图片</th>
                    <th class="text-center">点击量</th>
                    <th class="text-center">推荐等级</th>
                    <th class="text-center">课程类别</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <c:forEach items="${coursePage.list}" var="course">
                    <tr>
                        <td>${course.id}</td>
                        <td>${course.courseName}</td>
                        <td>${course.author}</td>
                        <td>
                            <image class="img" src="${pageContext.request.contextPath}${course.coverImageUrl}"
                                   alter="no image"/>
                        </td>
                        <td>${course.clickNumber}</td>
                        <td>
                            <c:if test="${course.recommendationGrade == 0}">普通</c:if>
                            <c:if test="${course.recommendationGrade == 1}">推荐</c:if>
                        </td>
                        <td>
                                ${course.courseTypeName}
                        </td>
                        <td>${course.createDate}</td>
                        <td>
                            <c:if test="${course.status == 0}">启用</c:if>
                            <c:if test="${course.status == 1}">禁用</c:if>
                        </td>
                        <td class="text-center">
                            <input type="button" class="btn btn-warning btn-sm doCourseModify" data-id="${course.id}"
                                   value="修改"/>
                            <c:if test="${course.status == 0}">
                                <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                       data-id="${course.id}" data-status="${course.status}" value="禁用"/>
                            </c:if>
                            <c:if test="${course.status == 1}">
                                <input type="button" class="btn btn-success btn-sm" name="modifyStatus"
                                       data-id="${course.id}" data-status="${course.status}" value="启用"/>
                            </c:if>
                            <!--<input type="button" class="btn btn-success btn-sm course-detail" value="章节详情" /> -->
                            <a href="${pageContext.request.contextPath}/chapter/findAll"
                               class="btn btn-success btn-sm course-detail">章节详情</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul id="coursePageHelper"></ul>
        </div>
        <!-- 分页 -->
        <div style="text-align: center;">
            <ul id="myPages"></ul>
        </div>

    </div>
</div>
</body>

</html>
